<template>
    <div class="detailContent paddingTop30 w1190 margin paddingBottom30">
        <!--产品详情上部-->
        <div class="detailTop clearFix">
            <div class="fl productDetailLeft">
                <div class="productDetailTit">车融宝No. 123456</div>
                <div class="productDetailBox marginTop40">
                    <el-row>
                        <el-col :span="8">
                            <div class="productDetailSome productDetailGain">
                                <span><font>12.80</font>%+1.30%</span>
                                <p>预期年化收益率</p>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="productDetailSome">
                                <span><font>108</font>天</span>
                                <p>项目期限</p>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="productDetailSome">
                                <span><font>368000.00</font>元</span>
                                <p>项目总额</p>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="productDetailBox marginTop40">
                    <el-row>
                        <el-col :span="9">
                            <div class="productDetailOther">
                                <ul>
                                    <li><span>起息时间：</span>2018.01.12</li>
                                    <li>
                                        <span>安全等级：</span>
                                        <i class="icon iconfont icon-woyaotouzi-xingxing"></i>
                                        <i class="icon iconfont icon-woyaotouzi-xingxing"></i>
                                        <i class="icon iconfont icon-woyaotouzi-xingxing"></i>
                                        <i class="icon iconfont icon-woyaotouzi-xingxing"></i>
                                        <i class="icon iconfont icon-woyaotouzi-xingxing"></i>
                                        （低风险）
                                    </li>
                                </ul>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="productDetailOther">
                                <ul>
                                    <li><span>募集结束日：</span>201.11.28</li>
                                    <li><span>适宜投资人：</span>风险偏好保守型以上</li>
                                </ul>
                            </div>
                        </el-col>
                        <el-col :span="7">
                            <div class="productDetailOther">
                                <ul>
                                    <li><span>还款方式：</span>一次性还本付息</li>
                                </ul>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="fr productDetailRight">
                <!--募集中 start-->
                <div class="productInvestBox" v-if="productStatus===0">
                    <div class="productInvestBoxMain">
                        <div class="productInvestProgress productDetailAbout marginBottom10 clearFix">
                            <span>投资进度：</span>
                            <div><i></i></div>
                            <p>100%</p>
                        </div>
                        <div class="productInvestLast productDetailAbout marginBottom10 clearFix">
                            <span>剩余可投：</span>
                            <p>263,589.00 元</p>
                        </div>
                        <div class="unLoginTips productDetailAbout marginBottom10 clearFix">
                            <span>账户余额：</span>
                            <p><router-link to="/login">登录</router-link>后可查看</p>
                        </div>
                        <div class="uOverage productDetailAbout marginBottom10 clearFix">
                            <span>账户余额：</span>
                            <p>1,000.00元</p>
                            <font>全投</font>
                        </div>
                        <div class="enterAmount marginBottom10">
                            <input type="text" placeholder="100.00元起购">
                            <span>元</span>
                            <div class="error clearFix"><i>!</i><font>申购金额最多18,765.00元</font></div>
                        </div>
                        <div class="productInvestLast productDetailAbout marginBottom10 clearFix">
                            <span>预计收益：</span>
                            <p>10.10元</p>
                        </div>
                    </div>
                    <div class="investNow">
                        <router-link :to="`/pay/${this.$route.params.id}`">立即投资</router-link>
                    </div>
                </div>
                <!--募集中 end-->
                <!--还款中 start-->
                <div class="productInvestBox" v-if="productStatus===1">
                    <div class="productInvestStatus">
                        <i class="icon iconfont icon-payback"></i>
                    </div>
                    <div class="lookMoreList">
                        <router-link to="/list">查看其他项目</router-link>
                    </div>
                </div>
                <!--还款中 end-->
                <!--已还款 start-->
                <div class="productInvestBox" v-if="productStatus===2">
                    <div class="productInvestStatus">
                        <i class="icon iconfont icon-reimbursement"></i>
                    </div>
                    <div class="lookMoreList">
                        <router-link to="/list">查看其他项目</router-link>
                    </div>
                </div>
                <!--已还款 end-->
            </div>
        </div>
        <!--产品详情下部-->
        <div class="detailBottom marginTop10">
            <el-tabs v-model="activeName" type="card" class="myTabs">
                <el-tab-pane label="项目详情" name="first">
                    <!--项目详情 start-->
                    <div class="projectDetail">
                        <div class="projectDetailTit">借款人信息</div>
                        <div class="productDetail-borrowerDetail">
                            <ul class="clearFix">
                                <li>
                                    <font>借款人：</font>
                                    <span>赵小二</span>
                                </li>
                                <li>
                                    <font>所属行业：</font>
                                    <span>金融</span>
                                </li>
                                <li>
                                    <font>逾期次数：</font>
                                    <span>0次</span>
                                </li>
                                <li>
                                    <font>逾期金额：</font>
                                    <span>0元</span>
                                </li>
                            </ul>
                        </div>
                        <div class="projectDetailTit">审核信息</div>
                        <div class="productDetail-infoCheck">
                            <ul class="clearFix">
                                <li class="ic1">
                                    <i></i>
                                    <p>实名认证</p>
                                </li>
                                <li class="ic2">
                                    <i></i>
                                    <p>手机号</p>
                                </li>
                                <li class="ic3">
                                    <i></i>
                                    <p>征信报告</p>
                                </li>
                                <li class="ic4">
                                    <i></i>
                                    <p>借款记录</p>
                                </li>
                            </ul>
                        </div>
                        <div class="projectDetailTit">项目描述</div>
                        <div class="productDetail-projectDesc">
                            客户（借款人）购买平行进口车时需要由汽车销售公司向港口车辆批发商订车，由于车辆到货周期较长，港口车辆批发商要求全款订车，购车客户支付15%-20%的购车定金，剩余购车款向平台投资人募集。风控人员根据客户的购车合同、打款凭证及相关凭证，来判定该笔借款的合规性，并控制每笔借款金额和业务的真实性。
                        </div>
                        <div class="projectDetailTit">资金用途</div>
                        <div class="productDetail-projectDesc">
                            借款资金用于借款人购车垫资。
                        </div>
                        <div class="projectDetailTit">相关材料</div>
                        <div class="productDetail-infoImage">
                            <ul>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                    <!--项目详情 end-->
                </el-tab-pane>
                <el-tab-pane label="安全保障" name="second">
                    <!--安全保障 start-->
                    <div class="projectDetail">
                        <div class="projectDetailTit">安全模式</div>
                        <div class="productDetail-security">
                            <img src="../../assets/images/produt-security.png">
                        </div>
                        <div class="projectDetailTit">还款来源</div>
                        <div class="productDetail-projectDesc">
                            <p>1. 债务人办理银行贷款，用银行贷款发放款做为平台回款；</p>
                            <p>2. 汽车按揭公司为债务人提供全额本息担保；</p>
                            <p>3. 担保公司为汽车按揭公司提供全额本息担保</p>
                        </div>
                        <div class="projectDetailTit">风险控制</div>
                        <div class="productDetail-projectDesc">
                            <p>1. 借款客户资质审查，按比例缴纳购车定金。</p>
                            <p>2. 汽车销售公司先期为借款人垫付该笔借款，支付购车款后取得相关凭证，保证借款业务的真实性和借款额度的风险控制。 </p>
                            <p>3. 汽车销售公司对借款进行本息全额担保。</p>
                        </div>
                    </div>
                    <!--安全保障 end-->
                </el-tab-pane>
                <el-tab-pane label="投资记录" name="third">
                    <!--投资记录 start-->
                    <div class="projectDetail">
                        <div class="productDetail-investTop">
                            <ul class="clearFix">
                                <li class="nft">
                                    <i></i>
                                    <p>150****9887，获得<font>8元</font>红包</p>
                                </li>
                                <li class="ft">
                                    <i></i>
                                    <p>150****9887，获得<font>900元</font>红包</p>
                                </li>
                                <li class="nft">
                                    <i></i>
                                    <p>150****9887，获得<font>8元</font>红包</p>
                                </li>
                            </ul>
                        </div>
                        <div class="productDetail-investTit clearFix">
                            <span class="pi1">投资时间</span>
                            <span class="pi2">投资用户</span>
                            <span class="pi3">投资金额(元)</span>
                            <span class="pi4">投资方式</span>
                        </div>
                        <div class="productDetail-investList">
                            <ul>
                                <li class="clearFix">
                                    <span class="pi1">2017.9.5 11:29:10</span>
                                    <span class="pi2">130****5786</span>
                                    <span class="pi3">100,000.00</span>
                                    <span class="pi4">手动投资</span>
                                </li>
                                <li class="even">
                                    <span class="pi1">2017.9.5 11:29:10</span>
                                    <span class="pi2">130****5786</span>
                                    <span class="pi3">100,000.00</span>
                                    <span class="pi4">手动投资</span>
                                </li>
                                <li>
                                    <span class="pi1">2017.9.5 11:29:10</span>
                                    <span class="pi2">130****5786</span>
                                    <span class="pi3">100,000.00</span>
                                    <span class="pi4">手动投资</span>
                                </li>
                                <li class="even">
                                    <span class="pi1">2017.9.5 11:29:10</span>
                                    <span class="pi2">130****5786</span>
                                    <span class="pi3">100,000.00</span>
                                    <span class="pi4">手动投资</span>
                                </li>
                                <li>
                                    <span class="pi1">2017.9.5 11:29:10</span>
                                    <span class="pi2">130****5786</span>
                                    <span class="pi3">100,000.00</span>
                                    <span class="pi4">手动投资</span>
                                </li>
                                <li class="even">
                                    <span class="pi1">2017.9.5 11:29:10</span>
                                    <span class="pi2">130****5786</span>
                                    <span class="pi3">100,000.00</span>
                                    <span class="pi4">手动投资</span>
                                </li>
                                <li>
                                    <span class="pi1">2017.9.5 11:29:10</span>
                                    <span class="pi2">130****5786</span>
                                    <span class="pi3">100,000.00</span>
                                    <span class="pi4">手动投资</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--投资记录 end-->
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                activeName: 'first',
                productStatus: 0, //0：募集中，1：还款中，2：已放款
                productId: this.$route.params.id
            }
        }
    }
</script>

<style lang="scss" scoped>
    .detailTop{
        width: 100%;
        .productDetailLeft{
            width: 770px;
            background: #fff;
            border-radius: 5px;
            padding: 30px;
            height: 250px;
            .productDetailTit{
                width: 100%;
                border-bottom: 1px solid #dfdfdf;
                color: #333;
                font-size: 18px;
                height: 44px;
            }
            .productDetailSome{
                color: #999;
                font-size: 14px;
                span{
                    display: block;
                    margin-bottom: 10px;
                    font-size: 20px;
                    color: #333;
                    font{
                        font-size: 30px;
                    }
                }
            }
            .productDetailGain span{
                color: #ff6235;
            }
            .productDetailOther{
                li{
                    margin-bottom: 15px;
                    font-size: 14px;
                    color: #333;
                    position: relative;
                    span{
                        display: block;
                        float: left;
                        color: #999;
                        margin-right: 5px;
                    }
                    i{
                        color: #ffc600;
                        float: left;
                        margin-right: 3px;
                    }
                }
                li:after{
                    content: '';
                    display: block;
                    width: 0;
                    height: 0;
                    clear: both;
                    visibility: hidden;
                }
            }
        }
        .productDetailRight{
            width: 310px;
            background: #fff;
            border-radius: 5px;
            padding: 20px;
            height: 270px;
            .productInvestBox{
                width: 100%;
                position: relative;
                .productInvestBoxMain{
                    width: 100%;
                    height: 225px;
                }
                .productDetailAbout{
                    font-size: 14px;
                    height: 24px;
                    line-height: 24px;
                    color: #999;
                    span{
                        float: left;
                        margin-right: 10px;
                    }
                    p{
                        float: left;
                    }
                }
                .productInvestProgress{
                    div{
                        height: 4px;
                        width: 180px;
                        background: #eee;
                        float: left;
                        border-radius: 4px;
                        margin-top: 10px;
                        margin-right: 10px;
                        i{
                            display: block;
                            width: 100%;
                            height: 4px;
                            background: linear-gradient(90deg,#ff6235, #ffbf35);
                            border-radius: 4px;
                        }
                    }
                    p{
                        color: #ff6235;
                    }
                }
                .productInvestLast p{ font-size: 16px; color: #333;}
                .unLoginTips a{ color: #ff6235;}
                .uOverage p{ color: #f02424;}
                .uOverage font{ float: right; color: #ff6235;}
                .enterAmount{
                    width: 100%;
                    position: relative;
                    height: 40px;
                    input{
                        border: 1px solid #ccc;
                        height: 38px;
                        width: 100%;
                        box-sizing: border-box;
                        padding: 0 20px 0 10px;
                        outline: none;
                    }
                    span{
                        display: block;
                        position: absolute;
                        right: 10px;
                        top: 0;
                        line-height: 40px;
                        font-size: 14px;
                        color: #333;
                    }
                    div.error{
                        position: absolute;
                        left: 0;
                        top: 37px;
                        background: #fff5bd;
                        border: 1px solid #fccb9c;
                        padding: 5px 10px;
                        line-height: 22px;
                        color: #da8742;
                        font-size: 12px;
                        border-radius: 3px;
                        i{
                            display: inline-block;
                            border-radius: 100%;
                            background: #d81e06;
                            text-align: center;
                            width: 16px;
                            height: 16px;
                            color: #fff5bd;
                            margin-right: 5px;
                            font-style: normal;
                            line-height: 16px;
                            font-size: 12px;
                        }
                    }
                    div.error:after{
                        content: '';
                    }
                }
                .investNow{
                    width: 100%;
                    span,a{
                        display: block;
                        width: 100%;
                        height: 40px;
                        background: #ff6235;
                        color: #fff;
                        border-radius: 3px;
                        text-align: center;
                        line-height: 40px;
                        font-size: 16px;
                        border: none;
                    }
                }
                .productInvestStatus{
                    width: 100%;
                    height: 225px;
                    line-height: 190px;
                    text-align: center;
                    i{
                        color: #ff6a6a;
                        font-size: 160px;
                    }
                }
                .lookMoreList{
                    width: 100%;
                    a{
                        display: block;
                        width: 100%;
                        height: 40px;
                        background: #ff6235;
                        color: #fff;
                        border-radius: 3px;
                        text-align: center;
                        line-height: 40px;
                        font-size: 16px;
                    }
                }
            }
        }
    }
    .detailBottom{
        width: 100%;
        background: #fff;
        border-radius: 5px;
        min-height: 1060px;
        padding-top: 10px;
        .projectDetail{
            padding: 0 20px;
            .projectDetailTit{
                font-size: 16px;
                color: #333;
                height: 30px;
                line-height: 30px;
                font-weight: 500;
            }
            .productDetail-borrowerDetail{
                background: #fafafa;
                margin: 15px 0 40px 0;
                padding: 10px 20px;
                font-size: 14px;
                color: #333;
                li{
                    float: left;
                    width: 210px;
                }
            }
            .productDetail-infoCheck{
                margin: 15px 0 40px 0;
                font-size: 14px;
                color: #333;
                li{
                    float: left;
                    width: 100px;
                    text-align: center;
                    margin-right: 80px;
                    i{
                        display: block;
                        width: 85px;
                        height: 59px;
                        margin: 0 auto 10px auto;
                        background: url(../../assets/images/product-triangle.png) no-repeat;
                    }
                }
                .ic1 i{ background-position: -138px -115px;}
                .ic2 i{ background-position: -223px -115px;}
                .ic3 i{ background-position: -308px -115px;}
                .ic4 i{ background-position: -393px -115px;}
            }
            .productDetail-projectDesc{
                background: #fafafa;
                margin: 15px 0 40px 0;
                padding: 10px 20px;
                font-size: 14px;
                color: #333;
                line-height: 24px;
            }
            .productDetail-infoImage{
                border: 1px solid red;
            }
            .productDetail-security{
                width: 100%;
                margin: 15px 0 40px 0;
            }
            .productDetail-investTop{
                margin: 15px 0 50px 0;
                ul{
                    width: 915px;
                    margin: 0 auto;
                    li{
                        float: left;
                        width: 305px;
                        text-align: center;
                        font-size: 16px;
                        color: #333;
                        i{
                            display: block;
                            width: 78px;
                            height: 100px;
                            margin: 0 auto 10px auto;
                            background: url(../../assets/images/product-triangle.png) no-repeat;
                        }
                        font{
                            font-size: 16px;
                            color: #ff3535;
                        }
                    }
                    li.nft i{ background-position: -78px -74px; width: 60px;}
                    li.ft i{ background-position: 0 -74px; width: 78px;}
                }
            }
            .productDetail-investTit{
                width: 100%;
                height: 50px;
                line-height: 50px;
                background: #f9f9f9;
                font-size: 14px;
                span{
                    display: block;
                    float: left;
                }
            }
            span.pi1{ width: 300px; padding-left: 80px;}
            span.pi2{ width: 290px;}
            span.pi3{ width: 290px;}
            span.pi4{ width: 190px;}
            .productDetail-investList{
                width: 100%;
                li{
                    height: 50px;
                    line-height: 50px;
                    font-size: 14px;
                    color: #999;
                    span{
                        display: block;
                        float: left;
                    }
                }
                li.even{
                    background: #f9f9f9;
                }
            }
        }
    }
</style>
<style lang="scss">
    .detailBottom {
        .el-tabs__active-bar{ background-color: #ff6235;}
        .el-tabs__item{ height: 54px; line-height: 54px;font-size: 16px;}
        .el-tabs__item.is-active{ color: #ff6235;}
    }
</style>